<template>
  <el-dialog :visible.sync="showPointDialog" :before-close="check" title="查看" width="67%">
    <el-card class="box-card">
      <div slot="header">
        <span class="bold">订单信息</span>
      </div>

      <el-row>
        <el-col :span="8">
          <div class="watch">订单编号：{{ oNumber }}</div>
        </el-col>
        <el-col :span="8">
          <div class="watch">订购时间：{{ orderTime }}</div>
        </el-col>
        <el-col :span="8">
          <div class="watch">订单类型：{{ info.orderTypeName }}</div>
        </el-col>
      </el-row>

      <el-row>
        <!-- <el-col :span="8">
          <div class="watch">订单状态：{{ info.Paystatus }}</div>
        </el-col> -->
        <el-col :span="8">
          <div class="watch">开始时间：{{ beginTime }}</div>
        </el-col>
        <el-col :span="8">
          <div class="watch">实付金额：{{ payPrice }}</div>
        </el-col>
        <el-col :span="8">
          <div class="watch">是否自动续订：{{ info.pisGoon === '0' ? '是' : '否' }}</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <div class="watch">所属业务平台：{{ info.platName }}</div>
        </el-col>
        <el-col :span="8">
          <div class="watch">支付渠道：{{ payCode }}</div>
        </el-col>
        <el-col :span="8">
          <div class="watch">产品原价：{{ info.constPrice }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-if="endTime" :span="8">
          <div class="watch">结束时间：{{ endTime }}</div>
        </el-col>
      </el-row>

    </el-card>

    <el-card class="box-card1">
      <div slot="header">
        <span class="bold">用户信息</span>
      </div>

      <el-row>
        <!-- <el-col :span="8">
          <div class="watch">用户编号：{{ userId }}</div>
        </el-col> -->
        <el-col :span="8">
          <div class="watch">用户ID：{{ userId }}</div>
        </el-col>
        <el-col :span="8">
          <div class="watch">手机号：{{ phoneNumber }}</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <div class="watch">推荐人：{{ reference }}</div>
        </el-col>
        <el-col :span="8">
          <div class="watch">礼品码：{{ giftCode }}</div>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card1">
      <div slot="header">
        <span class="bold">产品信息</span>
      </div>

      <el-row>
        <el-col :span="8">
          <div class="watch">产品编号：{{ pId }}</div>
        </el-col>
        <el-col :span="8">
          <div class="watch">产品名称： {{ pName }}</div>
        </el-col>
        <el-col :span="8">
          <div class="watch">触发订购节目名称：{{ sourceName }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="watch">触发订购节目ID：{{ sourceId }}</div>
        </el-col>
      </el-row>
    </el-card>

  </el-dialog>
</template>

<script>
import { getDetail } from '@/api/buyList.js'
export default {
  name: 'Watch',
  props: {
    watchDialog: {
      type: Boolean,
      default: false
    },
    watchId: {
      type: String,
      default: ''
    },
    scopeInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showPointDialog: false, // 遮罩
      ednTime: '',
      oNumber: '', // 订单编号
      orderTime: '', // 订购时间
      orderType: '', // 订单类型
      status: '', // 订单状态
      beginTime: '', // 生效时间
      payPrice: '', // 花费价格
      terminalType: '', // 终端类型
      payCode: '', // 支付渠道编码
      userId: '', // 用户编号
      phoneNumber: '', // 手机号
      reference: '', // 推荐人
      giftCode: '', // 礼品码
      pCode: '', // 产品编号
      pName: '', // 产品名称
      info: {},
      pId: '',
      endTime: '',
      sourceId: '',
      sourceName: '',
      productExistsStatus: '' // 是否在线
    }
  },
  watch: {
    watchDialog(newVal) {
      this.showPointDialog = newVal
    },
    watchId(newVal) {
      this.info = this.scopeInfo.row
      this.loadDetail(newVal)
    }
  },
  methods: {
    // 回调父组件
    check() {
      this.showPointDialog = false
      this.$emit('closeWatch')
    },
    // 请求详情
    loadDetail(id) {
      getDetail({ oNumber: id }).then(res => {
        const data = res.data
        this.oNumber = data.oNumber
        this.orderTime = data.orderTime
        this.orderType = data.orderType
        this.status = data.status
        this.beginTime = data.beginTime
        this.payPrice = data.payPrice
        this.terminalType = data.terminalType
        this.payCode = data.payCode
        this.userId = data.userId
        this.phoneNumber = data.phoneNumber
        this.reference = data.reference
        this.giftCode = data.giftCode
        this.pCode = data.pCode
        this.endTime = data.endTime
        this.pName = data.pName
        this.sourceName = data.sourceName
        this.sourceId = data.sourceId
        this.ednTime = data.ednTime
        this.pId = data.pId
        this.productExistsStatus = data.productExistsStatus
      })
    }
  }
}
</script>

<style scoped>
.box-card{
  margin-top: -25px;
}
.box-card1{
  margin-top: 10px;
}
.box-card2{
  margin-top: 10px;
}
.watch{
  margin: 10px 0;
}
.bold{
  font-weight: bold;
}
.el-card__header{
  padding: 9px 20px !important;
}
</style>
